<template>
  <div id="app">
    <!--    header start-->
    <van-nav-bar
      class="appNav"
      :title="title"
      left-text=""
      left-arrow
      @click-left="onClickLeft"
    />
    <!--    header end-->
    <!--    router start-->
    <keep-alive v-if="$route.meta.keepAlive">
      <router-view class="router"></router-view>
    </keep-alive>
    <router-view v-else class="router"></router-view>
    <!--    router end-->
    <!--    footer start-->
    <van-tabbar v-show="tabShow" v-model="active">
      <van-tabbar-item icon="home-o" to="/home">外卖</van-tabbar-item>
      <van-tabbar-item icon="search" to="/search">搜索</van-tabbar-item>
      <van-tabbar-item icon="records" to="">订单</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/profile">我的</van-tabbar-item>
    </van-tabbar>
    <!--    footer end-->
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      title: this.$route.meta.title,
      tabShow: this.$route.meta.tabShow,
      active: this.$route.meta.active
    }
  },
  methods: {
    onClickLeft () {
      this.$router.go(-1)
    }
  },
  watch: {
    '$route.meta' (meta) {
      this.title = meta.title
      this.tabShow = meta.tabShow
      this.active = meta.active
    }
  }
}
</script>
<style lang="scss">
  html, body {
    height: 100%;
  }

  #app {
    min-height: 100%;
    padding-top: 60px;
    box-sizing: border-box;
    background: #f5f5f5;

    [class*=van-hairline]::after {
      border: none
    }

    .appNav {
      width: 100%;
      position: fixed;
      top: 0;
      background: #3190e8;
      z-index: 999;

      .van-nav-bar__content {
        height: 60px;
      }

      .van-nav-bar__title {
        height: 60px;
        line-height: 60px;
        color: #ffffff;
        font-size: 26px;
      }

      .van-icon-arrow-left::before {
        color: #ffffff;
        font-size: 26px;
      }
    }

    .van-tabbar {
      height: 70px;
      border-top: 1px solid #eeeeee;
      box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);

      .van-tabbar-item {
        .van-tabbar-item__icon {
          font-size: 30px;
        }
      }

      .van-tabbar-item__text {
        font-size: 14px;
      }
    }
  }
</style>
